<template>
  <div class="consumption">
    <x-header>用气明细</x-header>
    <!-- {{dataList}} -->
    <div class="consumption-header">
      <img class="consumption-header-icon" src="../../assets/img/securityCheckImg/titledecoration.png" alt="">
      <div class="consumption-header-title">用户编号{{CONS_NO}}</div>
    </div>
    <div class="consumptionContent">
      <div class="consumption-item">
        <div class="consumption-item-title">费用状态</div>
        <div class="consumption-item-title">发行日期</div>
        <!-- <div class="consumption-item-title">抄表性质</div> -->
        <div class="consumption-item-titleTwo">指针</div>
        <div class="consumption-item-titleTwo">用量</div>
        <div class="consumption-item-titleTwo">金额</div>
      </div>
      <div class="consumption-item" v-for="(item,index) in dataList" :key="index">
        <div class="consumption-item-title consumption-item-titleColorThree" v-if="item.SETTLE_FLAG =='01'">未结清</div>
        <div class="consumption-item-title consumption-item-titleColorTwo" v-if="item.SETTLE_FLAG =='02'">部分结清</div>
        <div class="consumption-item-title consumption-item-titleColorOne" v-if="item.SETTLE_FLAG =='03'">已结清</div>
        <div class="consumption-item-title">{{item.RELEASE_DATE}}</div>
        <!-- <div class="consumption-item-title">见抄</div> -->
        <div class="consumption-item-titleTwo">{{item.THIS_READ}}</div>
        <div class="consumption-item-titleTwo">{{item.SETTLE_TQ}}</div>
        <div class="consumption-item-titleTwo">{{item.RCVBL_AMT}}</div>
      </div>
      <div class="consumption-sum">
       {{sum}}
      </div>
    </div>
    <div class="consumption-footer">
      <div class="consumption-submit">
        缴费
      </div>
    </div>
  </div>
</template>

<script>
import { XHeader } from "vux";
import Vue from "vue";
export default {
  data() {
    return {
      dataList: [],
      CONS_NO: "",
      sum: 0
    };
  },
  components: {
    XHeader
  },
  methods: {
    bindHeaderAdd() {
      this.$router.push({
        path: "/ticketMaintain"
      });
    }
  },
  mounted() {
    Vue.set(this, "CONS_NO", localStorage.getItem("CONS_NO"));
    const _this = this;
    let sum = 0;
    AndroidApi.queryTableData(
      JSON.stringify({
        whereClause: "SELECT * FROM OWE_LIST A where CONS_NO=?",
        whereArgs: [_this.CONS_NO]
      }),
      function(msg) {
        if (msg.resultCode == "9999") {
          console.log(msg.result);
          Vue.set(_this, "dataList", msg.result);
          _this.dataList.forEach(function(item) {
            _this.sum += Number(item.RCVBL_AMT);
          });
        }
      }
    );
  }
};
</script>
<style scoped lang="less">
@import "../../assets/less/style.less";
</style>


